<template>
	<tabbar :tabs="showTabs" :current="currentTabIndex" @onTabClick="onTabClick" @onTabMidButtonClick="onTabMidButtonClick">
		<block v-if="currentTab">
			<Index v-if="currentTab.value===0" class="h-full"></Index>
			<Order v-else-if="currentTab.value===1" :defaultOrderStatus="orderStatus" class="h-full"></Order>
			<Publish v-else-if="currentTab.value===2" class="h-full"></Publish>
			<Message v-else-if="currentTab.value===3" class="h-full"></Message>
			<Mine v-else-if="currentTab.value===4" class="h-full"></Mine>
		</block>
		<share-activity v-if="showSharePopup" :id="activityId" :show="showSharePopup" :ext-params="sharedExtParams"
			@onClose="showSharePopup=false" />
	</tabbar>
</template>

<script setup>
	import { onLoad, onShareAppMessage } from '@dcloudio/uni-app'
	import { ref, watchEffect, defineAsyncComponent, computed, watch } from 'vue'
	import Index from '/pagesE/index/index.vue'
	import Order from '/pagesE/order/order.vue'
	import Publish from '/pagesE/publish/publish.vue'
	import Message from '/pagesE/message/message.vue'
	import Mine from '/pagesE/mine/mine.vue'
	import { useUserStore } from '@/stores/modules/user.js'
	import { useMessageStore } from '@/stores/modules/message.js'
	
	const userStore = useUserStore()
	const messageStore = useMessageStore()
	
	const tabs = ref([
		{
			icon: '../../static/image/tabs/tab-home.png',
			iconSelect: '../../static/image/tabs/tab-home-active.png',
			text: '首页',
			iconfont: '',
			show: true,
			needLogin: false,
			value: 0,
			mark: 0
		},{
			icon: '../../static/image/tabs/tab-order.png',
			iconSelect: '../../static/image/tabs/tab-order-active.png',
			text: '订单',
			iconfont: '',
			show: true,
			needLogin: true,
			value: 1,
			mark: 0
		},
		{
			midBtn: true,
			show: false,
			needLogin: true,
			value: 2,
			width: '150rpx', // 中间按钮大小，默认150rpx
			iconwidth: '88rpx', // 中间图标大小，默认150rpx 
			iconheight: '88rpx',
			offset: '50rpx', // 默认50rpx
			background: '#F5F5F5',
			text: '发布活动',
			textoffset: '50rpx',
			showtext: true,
			icon: '../../static/image/tabs/tab-publish.png',
			iconSelect: '../../static/image/tabs/tab-publish.png'
		},
		{
			icon: '../../static/image/tabs/tab-message.png',
			iconSelect: '../../static/image/tabs/tab-message-active.png',
			text: '消息',
			iconfont: '',
			show: false,
			needLogin: true,
			value: 3,
			mark: 0
		},{
			icon: '../../static/image/tabs/tab-mine.png',
			iconSelect: '../../static/image/tabs/tab-mine-active.png',
			text: '我的',
			iconfont: '',
			show: true,
			needLogin: false,
			value: 4,
			mark: 0
		}
	])
	
	const showTabs = computed(() => {
		return tabs.value.filter(it => it.show)
	})
	
	const currentTabIndex = ref(0)
	const currentTab = ref(showTabs.value[currentTabIndex.value])
	const currentComponent = ref(null)
	
	const onTabClick = ({tab, index}) => {
		if (tab.value !== currentTab.value.value) {
			if (tab.needLogin && !userStore.isLogin) {
				uni.navigateTo({
					url: '/pagesA/login/login'
				})
				return
			}
			currentTab.value = tab
			currentTabIndex.value = index
		}
	}
	
	const onTabMidButtonClick = ({tab, index}) => {
		currentTab.value = tab
		currentTabIndex.value = index
	}
	
	watchEffect(() => {
		// console.log('用户状态改变', userStore.isLogin, currentTab.value, currentTabIndex.value)
		if (userStore.isMerchant) {
			tabs.value[2].show = true
			tabs.value[3].show = true
			tabs.value[3].mark = messageStore.unreadCount
			if (currentTab.value && currentTab.value.value === 4) {
				currentTabIndex.value = 4
			}
		} else if (userStore.isAgent) {
			tabs.value[3].show = true
			tabs.value[3].mark = messageStore.unreadCount
			if (currentTab.value && currentTab.value.value === 4) {
				currentTabIndex.value = 3
			}
		} else {
			tabs.value[2].show = false
			tabs.value[3].show = false
			tabs.value[3].mark = 0
			if (!userStore.isLogin) {
				// 退出登录，之前是订单、发布、消息tab的切换到首页
				if (currentTab.value && [1,2,3].includes(currentTab.value.value)) {
					currentTab.value = showTabs.value[0]
					currentTabIndex.value = 0
				} else if (currentTab.value && currentTab.value.value === 4) {
					currentTab.value = tabs.value[4]
					currentTabIndex.value = 2
				}
			}
		}
	})
	
	watch(currentTab, (currentTab) => {
		getNoReadCount()
	})
	
	const orderStatus = ref('')
	
	const showSharePopup = ref(false)
	const activityId = ref('')
	const sharedExtParams = ref();
	const showShare = (options) => {
		console.log('显示分享', options)
		sharedExtParams.value = undefined;
		if (options.type === 'activity') {
			activityId.value = options.payload.id
			sharedExtParams.value = options.payload.extParams;
		}
		showSharePopup.value = true
	}
	
	const refresh = () => {
		
	}
	
	onLoad((query) => {
		console.log('首页加载', query)
		const index = showTabs.value.findIndex(it => it.value === +query.tab)
		currentTabIndex.value = index != -1 ? index : 0
		orderStatus.value = +query.orderState || ''
		currentTab.value = showTabs.value[currentTabIndex.value]
		uni.$on('showSharePopup', showShare)
		getNoReadCount()
		uni.$on('logout', refresh)
	})
	
	onShareAppMessage((options) => {
		console.log('home分享', options)
		showSharePopup.value = false
		if (options.from === 'button') {
			console.log("options:",options);
			const url = options.target.dataset?.promotionType==='GROUP_BUY'
				?`/pagesB/activity/activity-group-buy`
				:`/pagesB/activity/activity`;
			return {
				title: options.target.dataset.title,
				path: `${url}?id=${options.target.dataset.activityId}&code=${options.target.dataset.shareCode}&_from=home`,
				imageUrl: options.target.dataset.filepath
			}
		}
	})
	
	// 获取未读消息数
	const getNoReadCount = () => {
		if (userStore.isLogin) {
			messageStore.getUnreadCount()
		}
	}
</script>
